<!-- Layout布局组件 -->
<template>
  <el-container class="layout-container">
    <el-header class="header" height="80px">
      <div class="header-left">
        <a href="javascript:;" @click="goHome">
          <em>
           <i class="el-icon-reading"></i>
          </em>
          <span>教务系统</span>
        </a>
      </div>
      <div class="header-right">
        <el-dropdown @command="handleCommand">
          <span class="el-dropdown-link">
            <i> <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1109320530,1639176995&fm=26&gp=0.jpg" alt=""></i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="index">首页</el-dropdown-item>
            <el-dropdown-item command="logout">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        
        <span>Hi~,<span class="user">{{ username }}</span>,欢迎您！</span>
      </div>
    </el-header>
    <el-container>
      <el-aside width="250px" class="aside">
        <app-aside></app-aside>
      </el-aside>
      <el-main class="main">
        <main-top class="main-top"></main-top>
        <div class="content">
          <router-view></router-view>
        </div>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import AppAside from "./Aside.vue";
import  MainTop  from "./common/Top.vue";
export default {
  //import引入的组件需要注入到对象中才能使用

  components: {
    AppAside,
    "main-top":MainTop
  },
  data() {
    //这里存放数据
    return {
       username:''
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    goHome(){
      this.$router.push('/layout')
    },
    handleCommand(command){
      if(command == "index"){
        this.$router.push('/layout')
      }else if (command == "logout"){
        this.$http.get("http://linweiqin.cn:8001/admin/signout").then(() =>{
          
        })
        this.$router.push('/')
      }
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {
    function getCookie(key){
        let str = "";
        var tmp = document.cookie.split('; ');
        for(var i=0;i<tmp.length;i++){
            var t = tmp[i].split('=');
            if(t[0]===key){
                str = t[1];
            }
        }
        return str;   
    }
    this.username = getCookie('username');
    // console.log(this.$store.state.status);
    if(this.$store.state.status == 1){
      this.$message({
          message: '登陆成功',
          type: 'success'
      });
    }
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="less" scoped>
.layout-container {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  .aside {
    background-color: #d3dce6;
  }
  .header {
    background-color: #00284d;
    padding: 0 45px;
    line-height: 80px;
    color: #fff;
    .header-left{
      float: left;
      a{
      text-decoration: none;
      em{
      display: inline-block;
      text-align: center;
      line-height: 50px;
      border: 1px solid #ccc;
      border-radius: 50%;
      width: 50px;
      height: 50px;
      margin-right: 12px;
      vertical-align: middle;
        i{
          font-size: 20px;
          color: #fff;
        }
      }
      span{
        font-size: 20px;
        color: #fff;
        vertical-align: middle;
      }
     }
    }
    .header-right{
      float: right;
      margin-right: 20px;
      i{
        display: inline-block;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        overflow: hidden;
        margin-right: 20px;
        vertical-align: middle;
        cursor: pointer;
        img{
          height: 100%;
          width: 100%;
        }
      }
      .user{
        margin: 0 6px;
        color: #f00;
      }
    }
  }
  .main {
    position: relative;
    // background-color: #e9eef3;
    .main-top{
      height: 54px;
      padding: 0 20px;
      line-height: 54px;
      // background: #f8f8f8;
    }
    .content{
      width: 95%;
      margin: 0 auto;
    }
  }
}

</style>